﻿@using Coslen.Framework.Helpers
@model Coslen.TahorCRM.Domain.Entities.ViewModels.Editing.EventEditViewModel

@{
    ViewBag.Title = "Edit";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Edit</h2>

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/ckeditor/ckeditor.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/ckeditor/adapters/jquery.js")" type="text/javascript"></script>
<script type="text/javascript">
    
    function onStartAtTimeChanged() {
        //alert("onStartAtTimeChanged");
        var currentDateTime = $("#Event_StartingAt").val();
        var dateTimePieces = currentDateTime.split(" ");
        var currentDate = dateTimePieces[0];
        var currentTime = dateTimePieces[1];
        var changedTime = $('#divStartingAtTime').timepicker('getTime');

        var newDateTime = currentDate + " " + changedTime;
        $("#Event_StartingAt").val(newDateTime);
    }

    function onStartAtDateChanged(dateText, inst) {
        //alert("onStartAtDateChanged");
        var currentDateTime = $("#Event_StartingAt").val();
        var dateTimePieces = currentDateTime.split(" ");
        var currentDate = dateTimePieces[0];
        var currentTime = dateTimePieces[1];
        if (dateTimePieces.length == 3) {
            currentTime = currentTime + ' ' + dateTimePieces[2];
        }

        //var changedTime = $('#divStartingAtDate').timepicker('getTime');
        var changedDate = dateText;

        var newDateTime = changedDate + " " + currentTime;
        $("#Event_StartingAt").val(newDateTime);
    }

    function onEndAtTimeChanged() {
        //alert("onEndAtTimeChanged");
        var currentDateTime = $("#Event_EndingAt").val();
        if (currentDateTime == '') {
            var now = new Date();
            currentDateTime = dateFormat(now, "dd/mm/yyyy HH:MM TT");
        }

        var dateTimePieces = currentDateTime.split(" ");
        var currentDate = dateTimePieces[0];
        var currentTime = dateTimePieces[1];
        var changedTime = $('#divEndingAtTime').timepicker('getTime');

        var newDateTime = currentDate + " " + changedTime;

        $("#Event_EndingAt").val(newDateTime);
    }

    function onEndAtDateChanged(dateText, inst) {
        //alert("onEndAtDateChanged");
        var currentDateTime = $("#Event_EndingAt").val();
        if (currentDateTime == '') {
            var now = new Date();
            currentDateTime = dateFormat(now, "dd/mm/yyyy HH:MM TT");
        }

        var dateTimePieces = currentDateTime.split(" ");
        var currentDate = dateTimePieces[0];
        var currentTime = dateTimePieces[1];
        if (dateTimePieces.length == 3) {
            currentTime = currentTime + ' ' + dateTimePieces[2];
        }

        //var changedTime = $('#divStartingAtDate').timepicker('getTime');
        var changedDate = dateText;

        var newDateTime = changedDate + " " + currentTime;
        $("#Event_EndingAt").val(newDateTime);
    }

    $(document).ready(function () {
        // --------------------------------------------------------------------------------------------        
        // Setting up the HTML Editor
        // --------------------------------------------------------------------------------------------        
        CKEDITOR.replace('Event_Description', {
            customConfig: '@Url.Content("~/Scripts/ckeditor/ckeditor_customconfig.js")'
        });
        
        // Setting up the Date Picker
        $('#divStartingAtDate').datepicker({
            onSelect: onStartAtDateChanged,
            dateFormat: "dd/mm/yy"
        });

        @if(Model.Event.StartingAt.HasValue)
        {
           @: $('#divStartingAtDate').datepicker("setDate", new Date(@Model.Event.StartingAt.Value.Year, @Model.Event.StartingAt.Value.Month - 1, @Model.Event.StartingAt.Value.Day));
        }
        $('#divEndingAtDate').datepicker({
            onSelect: onEndAtDateChanged,
            dateFormat: "dd/mm/yy"
        });

        // Setting up the Time Picker
        $('#divStartingAtTime').timepicker({
            // Options
            timeSeparator: ':',           // The character to use to separate hours and minutes. (default: ':')
            showLeadingZero: true,        // Define whether or not to show a leading zero for hours < 10. (default: true)
            showMinutesLeadingZero: true, // Define whether or not to show a leading zero for minutes < 10. (default: true)
            showPeriod: true,            // Define whether or not to show AM/PM with selected time. (default: false)
            showPeriodLabels: true,       // Define if the AM/PM labels on the left are displayed. (default: true)
            periodSeparator: ' ',         // The character to use to separate the time from the time period.
            //altField: '#Event_StartingAt', // Define an alternate input to parse selected time to
            defaultTime: '@Model.Event.StartingAt.Value.ToString("HH:mm")',         // Used as default time when input field is empty or for inline timePicker
            // (set to 'now' for the current time, '' for no highlighted time, default value: now)

            // trigger options
            showOn: 'focus',              // Define when the timepicker is shown.
            // 'focus': when the input gets focus, 'button' when the button trigger element is clicked,
            // 'both': when the input gets focus and when the button is clicked.
            button: null,                 // jQuery selector that acts as button trigger. ex: '#trigger_button'

            // Localization
            hourText: 'Hour',             // Define the locale text for "Hours"
            minuteText: 'Minute',         // Define the locale text for "Minute"
            amPmText: ['AM', 'PM'],       // Define the locale text for periods

            // Position
            myPosition: 'left top',       // Corner of the dialog to position, used with the jQuery UI Position utility if present.
            atPosition: 'left bottom',    // Corner of the input to position

            // Events
            //beforeShow: beforeShowCallback, // Callback function executed before the timepicker is rendered and displayed.
            onSelect: onStartAtTimeChanged,   // Define a callback function when an hour / minutes is selected.
            //onClose: onCloseCallback,     // Define a callback function when the timepicker is closed.
            //onHourShow: onHourShow,       // Define a callback to enable / disable certain hours. ex: function onHourShow(hour)
            //onMinuteShow: onMinuteShow,   // Define a callback to enable / disable certain minutes. ex: function onMinuteShow(hour, minute)

            // custom hours and minutes
            hours: {
                starts: 0,                // First displayed hour
                ends: 23                  // Last displayed hour
            },
            minutes: {
                starts: 0,                // First displayed minute
                ends: 55,                 // Last displayed minute
                interval: 5               // Interval of displayed minutes
            },
            rows: 4,                      // Number of rows for the input tables, minimum 2, makes more sense if you use multiple of 2
            showHours: true,              // Define if the hours section is displayed or not. Set to false to get a minute only dialog
            showMinutes: true,            // Define if the minutes section is displayed or not. Set to false to get an hour only dialog

            // buttons
            showCloseButton: false,       // shows an OK button to confirm the edit
            closeButtonText: 'Done',      // Text for the confirmation button (ok button)
            showNowButton: false,         // Shows the 'now' button
            nowButtonText: 'Now',         // Text for the now button
            showDeselectButton: false,    // Shows the deselect time button
            deselectButtonText: 'Deselect' // Text for the deselect button

        });


        $('#divEndingAtTime').timepicker({
        // Options
            timeSeparator: ':',           // The character to use to separate hours and minutes. (default: ':')
            showLeadingZero: true,        // Define whether or not to show a leading zero for hours < 10. (default: true)
            showMinutesLeadingZero: true, // Define whether or not to show a leading zero for minutes < 10. (default: true)
            showPeriod: true,            // Define whether or not to show AM/PM with selected time. (default: false)
            showPeriodLabels: true,       // Define if the AM/PM labels on the left are displayed. (default: true)
            periodSeparator: ' ',         // The character to use to separate the time from the time period.
            //altField: '#Event_StartingAt', // Define an alternate input to parse selected time to
            //defaultTime: '12:34',         // Used as default time when input field is empty or for inline timePicker
            // (set to 'now' for the current time, '' for no highlighted time, default value: now)

            // trigger options
            showOn: 'focus',              // Define when the timepicker is shown.
            // 'focus': when the input gets focus, 'button' when the button trigger element is clicked,
            // 'both': when the input gets focus and when the button is clicked.
            button: null,                 // jQuery selector that acts as button trigger. ex: '#trigger_button'

            // Localization
            hourText: 'Hour',             // Define the locale text for "Hours"
            minuteText: 'Minute',         // Define the locale text for "Minute"
            amPmText: ['AM', 'PM'],       // Define the locale text for periods

            // Position
            myPosition: 'left top',       // Corner of the dialog to position, used with the jQuery UI Position utility if present.
            atPosition: 'left bottom',    // Corner of the input to position

            // Events
            //beforeShow: beforeShowCallback, // Callback function executed before the timepicker is rendered and displayed.
            onSelect: onEndAtTimeChanged,   // Define a callback function when an hour / minutes is selected.
            //onClose: onCloseCallback,     // Define a callback function when the timepicker is closed.
            //onHourShow: onHourShow,       // Define a callback to enable / disable certain hours. ex: function onHourShow(hour)
            //onMinuteShow: onMinuteShow,   // Define a callback to enable / disable certain minutes. ex: function onMinuteShow(hour, minute)

            // custom hours and minutes
            hours: {
                starts: 0,                // First displayed hour
                ends: 23                  // Last displayed hour
            },
            minutes: {
                starts: 0,                // First displayed minute
                ends: 55,                 // Last displayed minute
                interval: 5               // Interval of displayed minutes
            },
            rows: 4,                      // Number of rows for the input tables, minimum 2, makes more sense if you use multiple of 2
            showHours: true,              // Define if the hours section is displayed or not. Set to false to get a minute only dialog
            showMinutes: true,            // Define if the minutes section is displayed or not. Set to false to get an hour only dialog

            // buttons
            showCloseButton: false,       // shows an OK button to confirm the edit
            closeButtonText: 'Done',      // Text for the confirmation button (ok button)
            showNowButton: false,         // Shows the 'now' button
            nowButtonText: 'Now',         // Text for the now button
            showDeselectButton: false,    // Shows the deselect time button
            deselectButtonText: 'Deselect' // Text for the deselect button
        });
        
        // Hide the Date Tiem Picker Divs
        ToggleHideShow($('#imgToggleHideShow_StartingAt'),'divDateTimePicker_StartingAt');
        ToggleHideShow($('#imgToggleHideShow_EndingAt'),'divDateTimePicker_EndingAt');
    });
</script>

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Event</legend>

		@Html.Partial("_CreateOrEdit", Model)
        
        @Html.HiddenFor(model => model.source)
		
        <p>
            @Html.SaveOrCancelSet(Model.sourceUrl)
        </p>

    </fieldset>
}

@if (string.IsNullOrWhiteSpace(Model.source))
{
    <div>
        @Html.ActionLink("Back to List", "Index")
    </div>
}
